import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:remixicon/remixicon.dart';
import 'package:super_person_app/constants/colors.dart';
import 'package:super_person_app/pages/message/chart/chart_state.dart';

import 'chart_logic.dart';

class ChartPage extends StatelessWidget {
  const ChartPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<ChartLogic>();
    final state = Get.find<ChartLogic>().state;

    return SafeArea(
      child: Scaffold(
        backgroundColor: const Color(0xffF6F6F6),
        appBar: AppBar(
          centerTitle: true,
          backgroundColor: Colors.white,
          elevation: 0,
          title: Text(
            "张三(56)",
            style: TextStyle(
              color: const Color(0xff212121),
              fontSize: 16.sp,
              fontWeight: FontWeight.w600,
            ),
          ),
          leading: IconButton(
            color: const Color(0xff414442),
            icon: Icon(Remix.arrow_left_s_line, size: 26.sp),
            onPressed: () {
              Get.back();
            },
          ),
          actions: [
            IconButton(
              color: const Color(0xff414442),
              icon: Icon(Remix.more_line, size: 26.sp),
              onPressed: () {
                Get.back();
              },
            ),
          ],
        ),
        body: ListView(
          controller: state.scrollController.value,
          padding: EdgeInsets.only(bottom: 56.h),
          children: [
            _time("昨天 20:35"),
            _receiveMessage(
                "https://img2.baidu.com/it/u=535790725,1148347184&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
                "崇璐莹",
                "大家有空最好都可以过来看看"),
            _sendMessage(
                "https://img2.baidu.com/it/u=1489746086,405631587&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360",
                "好的，没问题"),
            _receiveMessage(
                "https://img1.baidu.com/it/u=1340805476,3006236737&fm=253&fmt=auto&app=120&f=JPEG?w=360&h=360",
                "索茜茜",
                "好的，具体位置可以发下么，我有点记不大清楚了，谢谢！"),
            _time("昨天 20:37"),
            _receiveMessage(
                "https://img2.baidu.com/it/u=3429727124,1164343535&fm=253&fmt=auto&app=120&f=JPEG?w=700&h=693",
                "殷静静",
                "好的，明天10点左右到"),
            _sendMessage(
                "https://img2.baidu.com/it/u=1489746086,405631587&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360",
                "对了，去的都有那些人去了，需要带些什么资料呢？"),
            _time("昨天 21:13"),
            _receiveMessage(
                "https://img0.baidu.com/it/u=1690496027,3930951349&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360",
                "房锡丹",
                "好的，收到"),
            _receiveMessage(
                "https://img2.baidu.com/it/u=3621376058,1313966915&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                "温翌萌",
                "收到！！！"),
            _receiveMessage(
                "https://img0.baidu.com/it/u=109427305,3178113289&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360",
                "沐静薇",
                "好的，收到"),
            _time("昨天 21:56"),
            _sendMessage(
                "https://img2.baidu.com/it/u=1489746086,405631587&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360",
                "物业在么，麻烦回复下？"),
            _receiveMessage(
                "https://img2.baidu.com/it/u=2353742922,2982602670&fm=26&fmt=auto",
                "颛孙雅",
                "好的，收到"),
          ],
        ),
        bottomSheet: _chartInput(state, context),
        bottomNavigationBar: Obx(() {
          return !state.isFocus.value && state.isEmoji.value ? _emojiWrapper(state) :  const SizedBox.shrink();
        }),
      ),
    );
  }

  Widget _time(String text) {
    return Container(
      padding: EdgeInsets.only(
        top: 10.h,
        bottom: 10.h,
      ),
      color: Colors.transparent,
      alignment: Alignment.center,
      child: Text(
        text,
        style: TextStyle(
          color: const Color(0xffBABABA),
          fontSize: 12.sp,
        ),
      ),
    );
  }

  Widget _sendMessage(String avatar, String text) {
    return Container(
      width: Get.width * 0.5,
      alignment: Alignment.centerRight,
      padding: EdgeInsets.only(right: 10.w, bottom: 10.h),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          ConstrainedBox(
              constraints: BoxConstraints(
                  minWidth: Get.width * 0.3, maxWidth: Get.width * 0.76),
              child: Container(
                padding: EdgeInsets.only(right: 10.w),
                child: Container(
                  child: Text(
                    text,
                    style: const TextStyle(color: Colors.white),
                  ),
                  margin: EdgeInsets.only(top: 6.h),
                  padding: EdgeInsets.only(
                      left: 10.w, right: 10.w, top: 8.h, bottom: 8.h),
                  decoration: BoxDecoration(
                      color: BasicColor.mainColor,
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(10.w),
                          bottomRight: Radius.circular(10.w),
                          bottomLeft: Radius.circular(10.w))),
                ),
              )),
          CircleAvatar(
              radius: 20.w,
              backgroundImage: CachedNetworkImageProvider(avatar)),
        ],
      ),
    );
  }

  Widget _receiveMessage(String avatar, String userName, String text) {
    return Container(
      width: Get.width * 0.5,
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(left: 10.w, bottom: 10.h),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          CircleAvatar(
              radius: 20.w,
              backgroundImage: CachedNetworkImageProvider(avatar)),
          ConstrainedBox(
              constraints: BoxConstraints(
                  minWidth: Get.width * 0.3, maxWidth: Get.width * 0.76),
              child: Container(
                padding: EdgeInsets.only(left: 10.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      userName,
                      style: TextStyle(
                        color: const Color(0xff949499),
                        fontSize: 14.sp,
                      ),
                    ),
                    Container(
                      child: Text(
                        text,
                        style: const TextStyle(color: Color(0xff404041)),
                      ),
                      margin: EdgeInsets.only(top: 6.h),
                      padding: EdgeInsets.only(
                          left: 10.w, right: 10.w, top: 8.h, bottom: 8.h),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                              topRight: Radius.circular(10.w),
                              bottomRight: Radius.circular(10.w),
                              bottomLeft: Radius.circular(10.w))),
                    )
                  ],
                ),
              )),
        ],
      ),
    );
  }

  Widget _chartInput(ChartState state, BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(left: 10.w, right: 10.w, top: 6.h, bottom: 6.h),
      width: double.infinity,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          _bottomIcon(Remix.volume_up_line, state, context, 1),
          _bottomInput(state),
          _bottomIcon(Remix.user_smile_line, state, context, 2),
          _bottomIcon(Remix.add_circle_line, state, context, 3),
        ],
      ),
    );
  }

  Widget _bottomIcon(IconData icon, ChartState state, BuildContext context,int index) {
    return InkWell(
      onTap: () {
        FocusScope.of(context).requestFocus(FocusNode());
        if (index == 1) {

        } else if (index == 2) {
            state.isEmoji.value = !state.isEmoji.value;
        } else {

        }
      },
      child: SizedBox(
        width: 36.w,
        height: 36.w,
        child: Icon(
          icon,
          color: const Color(0xff39393A),
          size: 26.sp,
        ),
      ),
    );
  }

  Widget _bottomInput(ChartState state) {
    return Expanded(
      child: Container(
        margin: EdgeInsets.only(left: 4.w, right: 4.w),
        decoration: BoxDecoration(
            color: const Color(0xfff0f1f5),
            borderRadius: BorderRadius.circular(3.w)),
        constraints: BoxConstraints(minHeight: 36.w, maxHeight: 150.h),
        child: TextField(
          controller: state.textEditingController.value,
          keyboardType: TextInputType.text,
          textInputAction: TextInputAction.send,
          maxLines: null,
          minLines: 1,
          focusNode: state.focusNode.value,
          style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.w600),
          decoration: InputDecoration(
              isDense: true,
              contentPadding:
                  EdgeInsets.only(left: 6.w, right: 6.w, top: 8.h, bottom: 8.h),
              focusColor: const Color(0xffB6B6B6),
              border: const OutlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.transparent,
                ),
              ),
              enabledBorder: const OutlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.transparent,
                ),
              ),
              disabledBorder: const OutlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.transparent,
                ),
              ),
              focusedBorder: const OutlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.transparent,
                ),
              ),
              hintText: "说点什么吧...",
              hintStyle: TextStyle(
                fontSize: 14.sp,
                color: const Color(0xffB6B6B6).withOpacity(0.6),
              )),
        ),
      ),
    );
  }

  Widget _emojiWrapper(ChartState state) {
      return Container(
        height: 200.h,
        color: Colors.white,
        padding: EdgeInsets.only(
            left: 10.w,
            right: 10.w,
            top: 10.w,
            bottom: 10.w
        ),
        child: Container(
          color: const Color(0xfff0f1f5),
          child: PageView(
            children: state.emojiPageList.asMap().keys.map((pIndex) {
              return GridView(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 9,
                    mainAxisSpacing: 1,
                    crossAxisSpacing: 1
                ),
                children: state.emojiPageList[pIndex].asMap().entries.map<Widget>((item) {
                  int index = item.key;
                  String value = item.value;
                  return _emojiItem("assets/emoji/icon_${pIndex * 45 + index+1}.png");
                }).toList(),
              );
            }).toList(),
          ),
        ),
      );
  }

  Widget _emojiItem(String text) {
    return InkWell(
      onTap: () {},
      child: Material(
        color: Colors.white,
        child: Image.asset(text),
      ),
    );
  }
}
